<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>让坦克开起来</title>
		<style type="text/css">
			input{font-size:26px;margin-top: 20px;}
			body{background-image: url(images/grassland.png);}
			#mytank{position: absolute;left:10px;top:100px}
		</style>
	</head>
	<body>	
		<img id="mytank" src="images/right.png"/>
		<script>
			//	189000503  左香菊
			document.oncontextmenu = function(e){	//禁用鼠标右键
    		e.returnValue = false;
			}
			let Right = false;
			let Left = false;
			let Top = false;
			let Bottom = false;
			let width = document.documentElement.clientWidth;  //获取屏幕宽高，防止移出屏幕
			let height = document.documentElement.clientHeight;
			let Img = document.getElementsByTagName("img")[0];
			setInterval(function(){
				if(Right){
					Img.offsetLeft + 10<=width ? Img.style.left  = Img.offsetLeft + 10 + "px" : Img.style.left  = width - 200 +"px";  //10是定义每次移动步长
				}
				if(Left){
					Img.offsetLeft - 10>=0 ? Img.style.left  = Img.offsetLeft - 10 + "px" : Img.style.left  = 0;
				}
				if(Top){
					Img.offsetTop - 10>=0 ? Img.style.top  = Img.offsetTop - 10 + "px" : Img.style.top  = 0;
				}
				if(Bottom){
					Img.offsetTop + 10<=height ? Img.style.top  = Img.offsetTop + 10 + "px" : Img.style.top  = height - 200 +"px";
				}
			},20);
			document.onkeydown = function(e){
				switch(e.keyCode){ //判断当前点击的是什么按钮
					case 37:Left = true;Img.src="images/left.png";break; //向左应该将图片切换为向左的样子那张图
					case 38:Top = true;Img.src="images/up.png";break;
					case 39:Right = true;Img.src="images/right.png";break;
					case 40:Bottom = true;Img.src="images/down.png";break;
				}
			}
			document.onkeyup = function(e){ //在抬起时需要停止移动
				switch(e.keyCode){
					case 37:Left = false;break;
					case 38:Top = false;break;
					case 39:Right = false;break;
					case 40:Bottom = false;break;
				}
			}


		</script>
	</body>
</html>
